<template>
  <div id="signout_container">
    <header-nav headTitle="Profile" go-back="true"></header-nav>
    <section class="profile_cnt">
      <p class="name">Hi, <span>{{userInfo.username }}</span></p>

      <section class="link-cnt">
        <p class="item" style="color: #434343;">Address List</p>
        <ul v-if="addressData.length" class="address_list">
          <li v-for="(item, index) in addressData" :class="{'cur-select': item.is_active}">
            <div class="content">
              <p class="txt"><span>{{  item.name }}</span><span>{{  item.mobile }}</span></p>
              <p class="txt">{{  item.address }}</p>
            </div>
            <router-link :to="{path:'/address', query:{user_id: item.user_id, address_id: item.id}}" class="edit">EDIT</router-link>
          </li>
        </ul>
        <router-link to="/address" class="item">Add Address</router-link>
        <router-link to="/order/list" class="item">Check Order</router-link>
      </section>
    </section>
    <button class="login_btn" @click.prevent="logout()">Logout</button>
    <alert-tip v-show="showAlert" :alertText="alertText" @closeTip="closeTip"></alert-tip>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import AlertTip from '../../components/AlertTip.vue'
  import { getUserById, signout, getAddress } from '../../service/getData'
  import { getStore } from '../../config/mUtils'
  export default {
    data() {
      return {
        showAlert: false,
        alertText: null,
        userInfo: {},
        addressData: []
      }
    },
    components: {
      HeaderNav,
      FooterNav,
      AlertTip
    },
    created() {
      this.getUserInfo()
      this.getUserAddress()
    },
    methods: {
      ...mapMutations([
        'OUT_LOGIN', 'RECORD_USERINFO'
      ]),
      async getUserInfo() {
      	let user_id = Number(getStore('user_id'))
      	await getUserById(user_id).then(res => {
          this.userInfo = res.data
          this.RECORD_USERINFO(res.data)
        })
      },
      async getUserAddress() {
        let user_id = Number(getStore('user_id'))
      	await getAddress(user_id).then(res => this.addressData = res.data)
      },
      async logout() {
        await signout().then(res => {
        	if(res.data.status == 1) {
        		this.OUT_LOGIN()
            this.alertText = res.data.message
            this.showAlert = true
            this.$router.push('/login')
          }
        })
      },
      closeTip() {
        this.showAlert = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #signout_container {
    padding-top: 1.9rem;
    @include sc(0.65rem , #434343);
  }
  .profile_cnt {
    .name {
      width: 80%;
      padding: 0.5rem 0;
      margin: 0 auto;
    }
    width: 100%;
  }
  .link-cnt {
    .item {
      width: 100%;
      display: block;
      padding:0.65rem 10%;
      margin-bottom: 5px;
      background-color: #fff;
      @include sc(0.65rem, $blue)
    }
  }
  .address_list {
    padding: 10px 0 20px;
    @include sc(0.5rem , #434343);
    li {
      @include fj;
      justify-content: space-between;
      align-items: center;
      border:1px solid #c4c4c4;
      width: 90%;
      margin:5px auto;
    }
    .cur-select {
      border:2px solid #60ba79;
    }
    .txt {
      @include fj;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      span {
        padding-right: 10px;
      }
    }
    .edit {
      display: inline-block;
      width: auto;
      padding: 0.45rem;
      @include sc(0.55rem , #434343);
      background-color: #cadace;
    }
  }
  .login_btn {
    display: block;
    width: 80%;
    margin: 0 auto;
    background-color: #cc0000;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
</style>
